VOS - rendering
Dynamische partiële views
In de VOS applicatie zijn er twee views die dynamisch gecreëerd moeten worden. D.w.z. de HTML wordt op basis van gegevens (data-driven) door JavaScript aan de DOM toegevoegd. Deze partiële views zijn:
- identity
- procedure
Identity
De gegevens van de gebruiker, zijn identiteit, worden opgehaald uit het indentity.json bestand en met behulp van JavaScript in de HTML geïnjecteerd of aan de DOM toegevoegd. Die indentity gegevens worden al in het model geladen (zie VOS - Model initialiseren).
De rendering code plaatsen we in een namespace met de naam render
. In het vos.js bestand voegen we die namespace toe:
var render = { 'identity': function (querySelector) { var elem = document.querySelector(querySelector); elem.innerHTML = ''; elem.appendChild(makeTextElement(vos.model.identity.firstName + ' ' + vos.model.identity.lastName, 'h2')) elem.appendChild(makeTextElement(vos.model.identity.function, 'h3')); elem.appendChild(makeTextElement(vos.model.identity.mobile, 'h4')); elem.appendChild(makeTextElement(vos.model.myLocation.name)); elem.appendChild(makeTextElement(vos.model.myLocation.street)); elem.appendChild(makeTextElement(vos.model.myLocation.phone)); if (vos.model.identity.loggedIn) { elem.appendChild(makeTextElement('aangemeld als ' + vos.model.identity.role)); var buttonElement = makeButton('Afmelden'); buttonElement.setAttribute('name', 'uc'); buttonElement.setAttribute('value', 'home/logout'); elem.appendChild(buttonElement); } else { elem.appendChild(makeTextElement('aangemeld als gast')); var buttonElement = makeButton('Aanmelden'); buttonElement.setAttribute('name', 'uc'); buttonElement.setAttribute('value', 'home/loggingIn'); elem.appendChild(buttonElement); } return elem; } }
De gegevens staan in vos.model.identity
. We maken een tekstelement voor de
- voornaam
- familienaam
- functiebeschrijving
- gsm
- naam van de organisatie
- straat
- tel van de organisatie
Indien de gebruiker is aangemeld creëern we een afmelden knop, anders een aanmelden knop.
En voegen die nieuw gecreëerde elementen toe aan het container HTML element met de id die als argument aan die functie wordt meegegeven. Deze methode retourneert bovendien het HTML container element.
procedure
Voor het renderen van de procedure maken we de volgende methoden
- make: deze methode creëert op basis van het JSON bestand de nodige HTML elementen;
- TEL: deze methode toont het telefoonnummer indien de gebruiker niet is aangemeld, of maakt een tel knop waarmee de gebruiker kan bellen;
- SMS: deze methode toont het telefoonnummer indien de gebruiker niet is aangemeld, of maakt een tel knop waarmee de gebruiker een SMS kan versturen;
- LIST: een helper methode die een OL HTML element maakt;
Onder de identity
methode plaatsen we de procedure
methode:
var render = {
'identity': function (querySelector) {
var elem = document.querySelector(querySelector);
elem.innerHTML = '';
elem.appendChild(makeTextElement(vos.model.identity.firstName + ' ' + vos.model.identity.lastName, 'h2'))
elem.appendChild(makeTextElement(vos.model.identity.function, 'h3'));
elem.appendChild(makeTextElement(vos.model.identity.mobile, 'h4'));
elem.appendChild(makeTextElement(vos.model.myLocation.name));
elem.appendChild(makeTextElement(vos.model.myLocation.street));
elem.appendChild(makeTextElement(vos.model.myLocation.phone));
if (vos.model.identity.loggedIn) {
elem.appendChild(makeTextElement('aangemeld als ' + vos.model.identity.role));
var buttonElement = makeButton('Afmelden');
buttonElement.setAttribute('name', 'uc');
buttonElement.setAttribute('value', 'home/logout');
elem.appendChild(buttonElement);
}
else {
elem.appendChild(makeTextElement('aangemeld als gast'));
var buttonElement = makeButton('Aanmelden');
buttonElement.setAttribute('name', 'uc');
buttonElement.setAttribute('value', 'home/loggingIn');
elem.appendChild(buttonElement);
}
return elem;
},
'procedure': {
'make': function (procedureCode) {
var procedure = vos.model.procedureList.procedure.find(function (item) {
return item.code === procedureCode;
});
elem = render.identity('#view-procedure .show-room');
var step = document.createElement('DIV');
step.setAttribute('class', 'step');
step.appendChild(makeHtmlTextElement(procedure.heading, 'h2'));
var listElement = document.createElement('OL');
listElement.setAttribute('class', 'index');
procedure.step.forEach(function (item, index) {
var step = makeHtmlTextElement(item.title, 'li');
if ("action" in item) {
var commandPanelElem = makeCommandPanel();
item.action.forEach(function (item) {
commandPanelElem.appendChild(render.procedure[item.code](item, procedure.title));
});
step.appendChild(commandPanelElem);
}
if ("list" in item) {
step.appendChild(render.procedure['LIST'](item.list));
}
listElement.appendChild(step);
});
step.appendChild(listElement);
elem.appendChild(step);
},
'TEL': function (item, message) {
// Het telefoonnummer van directie, secretariaat, ... is afhankelijk van de plaats
var phoneNumber = getPhoneNumber(item.phoneNumber);
if (vos.model.identity.loggedIn) {
var buttonElement = makeTileButton('Tel', 'icon-phone');
buttonElement.addEventListener('click', function () {
phoneCall(phoneNumber);
});
return buttonElement;
} else {
return makeTextElement(item.code + ' ' + phoneNumber, 'P');
}
},
'SMS': function (item, message) {
// Het telefoonnummer van directie, secretariaat, ... is afhankelijk van de plaats
var phoneNumber = getPhoneNumber(item.phoneNumber);
if (vos.model.identity.loggedIn) {
var buttonElement = makeTileButton('Tel', 'icon-send');
buttonElement.addEventListener('click', function () {
vos.smsPrepare(phoneNumber, message);
});
return buttonElement;
} else {
return makeTextElement(item.code + ' ' + phoneNumber, 'P');
}
},
'LIST': function (list) {
var listElement = document.createElement('OL');
listElement.setAttribute('class', 'index');
list.forEach(function (item) {
listElement.appendChild(makeHtmlTextElement(item.title, 'li'))
});
return listElement;
}
}
};
In de controller wordt de rendering methode opgeroepen:
var controller = { 'home': { 'index': function () { vos.getPosition(); vos.setMyLocation(); render.identity('#home .identity'); view['home']['index'](); }, 'gas-leak': function () { render.procedure.make('GL'); view['procedure']('gaslek'); },